<template>
	<view class="takephoto-page m-h100 bgcolor1">
		<view class="flex flex-column border-bottom item px-3 py-2 mx-2 " v-for="(item,index) in sspList" :key="index"
			@click="navTo(item)">
			<view class="flex">
				<image class="img flex-shrink rounded" :src="item.img[0]['url']" mode="aspectFill"></image>
				<view class="ml-1 flex flex-column">
					<text class="fs-28 ftcolor1 mb-1">描述：</text>
					<text class="fs-24 ftcolor4 text-ellipsis3">{{item.content}}</text>
				</view>
			</view>
			<view class="flex align-center justify-between mt-1">
				<text class="fs-24 ftcolor4">{{item.created_at}}</text>
				<text :class="`fs-24 text-white status color${item.status}`">{{item.status_name}}</text>
			</view>
		</view>
		<view class="text-center py-3" v-if="this.tempList.length === 15"><text class="fs-24 ftcolor2"
				@click="clickMore">查看更多</text></view>
		<noneBox v-if="sspList.length === 0"></noneBox>
		<view class="take-photo flex align-center justify-center rounded-circle" @click="takephoto('/pages/takephoto/upphoto')"><img
				class="photo" src="@/static/images/takephoto.png" alt="" /></view>
	</view>
</template>

<script>
	import serviceApi from '@/api/serviceApi.js'
	export default {
		data() {
			return {
				sspList: [],
				tempList: [],
				page: 1
			}
		},
		onShow() {
			this.gz_ssp()
		},
		created() {
			uni.removeStorageSync('curtakephotodetails')
		},
		methods: {
			gz_ssp() {
				serviceApi.gz_ssp({
					page: this.page,
					limit: 15
				}).then(res => {
					this.tempList = res.data
					if (this.page === 1) {
						this.sspList = res.data
					} else {
						this.sspList = this.sspList.concat(res.data)
					}
				})
			},
			clickMore() {
				if (this.tempList.length === 15) {
					this.page++
					this.gz_ssp()
				}
			},
			takephoto(url){
				uni.navigateTo({
					url:url
				})
			},
			navTo(item) {
				uni.setStorageSync('curtakephotodetails', item)
				uni.navigateTo({
					url: '/pages/takephoto/details'
				})
			},
		}
	}
</script>

<style lang="scss">
	.takephoto-page {
		.take-photo {
			height: 35px;
			background-image: linear-gradient(to bottom, #507EF7, #50abf7);
			position: fixed;
			right: 10px;
			left: 10px;
			bottom: 50rpx;
			z-index: 99;

			.photo {
				width: 25px;
				height: 25px;
			}
		}

		.item:last-child {
			border: 0;
		}

		.img {
			width: 200rpx;
			height: 150rpx;
		}

		.status {
			padding: 3rpx 10rpx;
			border-radius: 4rpx;

			&.color1 {
				background-color: #c3c3c3;
			}

			&.color2 {
				background-color: #fa3534;
			}

			&.color0 {
				background-color: #ff9900;
			}
		}
	}
</style>